import React, { Component } from 'react'
import { connect } from 'react-redux' // 帮助组件和redux仓库连接的
import * as types from '@/store/actionCreator' // 引入文件，配置别名

class ToDoList extends Component {
  render() {
    return (
      <div>
        <div>
          <input
            value={this.props.inputValue} 
            onChange={ (e) => this.props.changeClick(e) } 
          />
          <button onClick={() => this.props.btnClick() }>提交按钮</button>
        </div>
        
        <ul>
          {
            this.props.list.map((item, index) => {
              return <li key={index}
              onClick={() => this.props.deleteItem(index)}>{item}</li>
            })
          }
        </ul>
      </div>
    )
  }
  componentDidMount() {
    this.props.initData() 
  }
}

const mapState = (state) => {
  return {
    inputValue: state.todolist.inputValue,
    list: state.todolist.list
  }
}

const mapActions = (dispatch) => {
  return {
    initData() {
      const action = types.initGetData()
      dispatch(action)
    },
    changeClick(e) {
      const val = e.target.value
      const action = types.getInputChange(val)
      dispatch(action)
    },
    btnClick() {
      const action = types.getBtnClick()
      dispatch(action)
    },
    deleteItem(index) {
      const action = types.getDeleteItem(index)
      dispatch(action)
    }
  }
}

export default connect(mapState, mapActions)(ToDoList)
/**
 * input 不受控制
 * 
 * 更改为受控组件：
 *   value
 *   onChange
 * 
 */